<template>
    <div v-for="(msg, idx) in props.msgs">
        <div v-if="(msg.sender == 'agent' && props.showAt=='client')||(msg.sender == 'client' && props.showAt=='agent')" class="el-row" style="padding: 5px 0">
            <div class="el-col el-col-2" style="text-align: right">
              <span class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;">
                    <img v-if="props.showAt=='client'" src="@/assets/agent-icon.png" style="object-fit: cover;">
                    <img v-if="props.showAt=='agent'" src="@/assets/client-icon.png" style="object-fit: cover;">
              </span>
            </div>
            <div class="el-col el-col-22 leftBubble">
                <div class = "tip left" v-if="msg.type=='text'">{{msg.content}}</div>
                <div class = "img left" v-if="msg.type=='image'">
                <el-image style="width: 100px;"
                          :preview-src-list="[msg.content]"
                          :src="msg.content" fit="fill" :preview-teleported="true" />
            </div>
                <div class="tip left" v-if="msg.type=='audio'">
                    <el-link @click="playAudioFunc(msg.content,msg.id)"><AudioActive v-show="activeAudioId==msg.id" class="waving"/>
                        <AudioStop v-show="activeAudioId!=msg.id" class="waving"/></el-link>
                </div>
                <div class="time">{{moment(msg.createTime).format("yyyy-MM-DD HH:mm:ss")}}</div>
            </div>
        </div>
        <!--右边边显示的消息-->
        <div v-if="(msg.sender == 'client' && props.showAt=='client')||(msg.sender == 'agent' && props.showAt=='agent')" class="el-row" style="padding: 5px 0">
            <div class="el-col el-col-22 rightBubble">
                <div class="time">{{moment(msg.createTime).format("yyyy-MM-DD HH:mm:ss")}}</div>
                <div class = "tip right" v-if="msg.type=='text'">{{msg.content}}</div>
                <div class = "img right" v-if="msg.type=='image'">
                    <el-image style="width: 100px;"
                              :preview-src-list="[msg.content]"
                              :src="msg.content" fit="fill" :preview-teleported="true" />
                </div>
                <div class="tip right" v-if="msg.type=='audio'">
                    <el-link style="font-size: 14px" @click="playAudioFunc(msg.content,msg.id)"><AudioActive v-show="activeAudioId==msg.id" class="waving"/>
                        <AudioStop v-show="activeAudioId!=msg.id" class="waving"/></el-link>
                </div>
            </div>
            <div class="el-col el-col-2" style="text-align: left">
                 <span class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;">
                    <img v-if="props.showAt=='client'" src="@/assets/client-icon.png" style="object-fit: cover;">
                    <img v-if="props.showAt=='agent'" src="@/assets/agent-icon.png" style="object-fit: cover;">
                 </span>
            </div>
        </div>
        <!--显示系统的消息-->
        <div v-if="msg.sender == 'system'" class="el-row" style="padding: 5px 0">
            <div class="el-col el-col-24" style="text-align: center; padding-right: 10px">
                <div class="system">{{msg.content}}</div>
            </div>
        </div>
    </div>
    <PlayAudio @endPlay="endPlay" ref="playAudio"/>
</template>

<script  setup>
    import {ref,reactive,onMounted,onUpdated} from 'vue'
    import request from '@/utils/request.js'
    import ServiceTicket from '@/components/business/ServiceTicket.vue'
    import { ElMessage } from 'element-plus'
    import PlayAudio from '@/components/business/PlayAudio.vue'
    import AudioActive from '@/assets/svg/AudioActive.vue'
    import AudioStop from '@/assets/svg/AudioStop.vue'
    let playAudio = ref(null)
    let activeAudioId = ref(0)
    import moment from 'moment'
    import {Headset} from '@element-plus/icons-vue'
    let props = defineProps(['msgs','showAt'])
    let showDialog = ref(false)
    let chat = reactive({msgs:[]})
    let showAtAgent = ref(false);
    onMounted(() => {
        showAtAgent = props.showAt == 'agent'
    })
    onUpdated(() => {
        activeAudioId.value = 0
    })

    function playAudioFunc(src, msgId) {
        if(activeAudioId.value > 0){
            ElMessage({message: "正在播放语音",type: 'error'})
            return
        }
        activeAudioId.value= msgId
        playAudio.value.play(src)
    }
    function endPlay() {
        activeAudioId.value = 0
    }
</script>
<style>
    .tip {
        border-radius: 10px;
        padding: 10px;
        width:auto;
        display:inline-block;
        word-wrap: break-word;
        word-break: break-all;
        text-align:left;
        max-width:60%;
    }
    .img {
        border-radius: 10px;
        padding: 5px;
        width:auto;
        display:inline-block;
        word-wrap: break-word;
        word-break: break-all;
        text-align:left;
        max-width:60%;
    }
    .time {
        padding: 5px;
        display:inline-block;
        color: #8f9093;
        font-size: 13px;
    }
    .right {
        background-color:  #a7e861;
    }
    .left {
        background-color:  white;
    }
    .rightBubble {
        text-align: right;
        padding-right: 10px
    }
    .leftBubble {
        text-align: left;
        padding-left: 10px
    }
    .rightAvatar {
        text-align: right;
        padding-right: 10px
    }
    .leftAvatar {
        text-align: left;
        padding-left: 10px
    }
    .waving{
        height: 30px;
        width: 40px
    }
</style>
